<template>
  <div id="background">
    <div class="image" :class="{ dark: theme }"></div>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
import { useEnhandle } from "@/enhandle";
export default defineComponent({
  name: 'Theme',
  setup() {
    const { theme } = useEnhandle()
    const themeValue = theme.theme
    const themeIcon = computed(() => {
      const themeIconMap = {
        default: "icon-taiyang",
        dark: "icon-yueliang",
      }
      return themeIconMap[themeValue.value]
    })

    const toggleTheme = () => {
      theme.toggle()
    }

    return {
      theme: themeValue,
      themeIcon,
      toggleTheme
    }
  }
})
</script>

<style lang="scss" scoped>
#background {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: $z-index-underground;
  background-color: $body-bg;

  .image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background: url("/images/background.png");

    &.dark {
      opacity: 0.2;
    }
  }
}
</style>
